import 'echarts-liquidfill';
import * as echarts from 'echarts';
import { deepMerge } from './util';

// 水位图
class Liquid {
  static defaultOptions = {};
  constructor(container, options) {
    this.container = container;
    this.options = deepMerge({}, Liquid.defaultOptions, options);
    this.data = null;
    this.initChart();
  }
  initChart() {
    if (!this.chart) {
      this.chart = echarts.init(this.container);
    }
  }

  updateOptions() {
    const min = Math.max(this.data, 0.1);
    const data = Array(4)
      .fill(0.1)
      .map((i, index) => {
        return min - i * index;
      });
    const option = {
      backgroundColor: 'transparent',
      polar: {
        radius: ['100%', '100%'],
        center: ['50%', '50%'],
      },
      angleAxis: {
        max: 100,
        clockwise: false,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          type: 'liquidFill',
          radius: '90%',
          center: ['50%', '50%'],
          // data: [0.6, 0.5, 0.4, 0.3],
          data,
          color: ['#1df7ff1a', '#1df7ff4d'],
          outline: {
            show: false,
          },
          backgroundStyle: {
            // borderWidth: 1,
            color: 'transparent',
            borderWidth: 1,
            borderColor: '#1df7ff1a',
            // color: 'yellow'
          },
          label: {
            normal: {
              formatter: '',
            },
            show: false,
          },
          emphasis: {
            itemStyle: {
              opacity: 0.9,
            },
          },
        },
      ],
    };
    this.chart.setOption(option);
  }

  setData(data = 0.6) {
    this.data = data;
    this.updateOptions();
  }

  destroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}

export default Liquid;
